<template>
  <view class="content">
    <view class="boex">
      <image src="../../static/x.png" mode="scaleToFill" />
      <view class="text">报名成功</view>
      <image class="qrcode" :src="userList.verification_url" mode="scaleToFill" />
      <view class="submit" @click="saveImg">保存二维码</view>
    </view>

    <view class="other">其他功能</view>
    <view class="otherBtn">
      <view class="ability" @click="qurey">
        <image src="../../static/kp.png" mode="scaleToFill" />
        <view class="abilityText">开票入口</view>
      </view>
      <view class="ability" @click="invoicing">
        <image src="../../static/cx.png" mode="scaleToFill" />
        <view class="abilityText">查询入口</view>
      </view>
    </view>
  </view>
</template>

<script>
import { detail } from '../../api/user'
export default {
  data() {
    return {
      orderId: 0,
      userList: {}
    };
  },
  onLoad(options) {
    this.orderId = options.id
    this.weight(options.id)
  },
  methods: {
    async weight(e) {
      await detail({ order_id: e }).then(res => {
        console.log(res);
        this.userList = res.data[0]
      })
    },
    qurey() {
      uni.redirectTo({
        url: '/pages/qurey/qurey'
      })
    },

    invoicing() {
      uni.redirectTo({
        url: '/pages/invoicing/invoicing'
      })
    },
    saveImg() {
      uni.downloadFile({
        url: this.userList.verification_url,//你的图片地址
        success: function (res) {
          //图片保存到本地
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: function (data) {
              uni.hideLoading()
              uni.showModal({
                title: '提示',
                content: '已保存到相册',
                showCancel: false,
              })
            },
            fail: function (err) {
              if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
                // 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
                uni.showModal({
                  title: '提示',
                  content: '需要您授权保存相册',
                  showCancel: false,
                  success: modalSuccess => {
                    uni.openSetting({
                      success(settingdata) {
                        console.log("settingdata", settingdata)
                        if (settingdata.authSetting['scope.writePhotosAlbum']) {
                          uni.showModal({
                            title: '提示',
                            content: '获取权限成功,再次点击图片即可保存',
                            showCancel: false,
                          })
                        } else {
                          uni.showModal({
                            title: '提示',
                            content: '获取权限失败，将无法保存到相册哦~',
                            showCancel: false,
                          })
                        }
                      },
                      fail(failData) {
                        console.log("failData", failData)
                      },
                      complete(finishData) {
                        console.log("finishData", finishData)
                      }
                    })
                  }
                })
              }
            },
            complete(res) {
              uni.hideLoading()
            }
          })
        }
      })
    }
  }
}
</script>

<style>
page {
  background: #f2f2f2;
}
</style>
<style lang="scss">
.content {
  margin: 20rpx 40rpx;
  .boex {
    border-radius: 24rpx;
    background: #ffffff;
    box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 50rpx 20rpx;
    image {
      width: 100rpx;
      height: 100rpx;
      text-align: center;
    }

    .text {
      font-size: 36rpx;
      font-weight: bold;
      margin: 20rpx 0;
    }

    .qrcode {
      width: 300rpx;
      height: 300rpx;
    }

    .submit {
      width: 186px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      opacity: 1;
      border-radius: 1000px;
      background: linear-gradient(141.96deg, #d269ff 0%, #7d63ff 100%);
      margin-right: 50rpx;
      margin: 0 auto;
      color: #ffffff;
    }
  }

  .other {
    font-size: 32rpx;
    font-weight: bold;
    margin: 20rpx 0;
  }

  .otherBtn {
    display: flex;
    align-items: center;
    .ability {
      background: #fff;
      padding: 100rpx 0 60rpx 0;
      border-radius: 24rpx;
      flex: 1;

      /* 间隙为5px */
      margin: 0 20px 20px 0;
      /* END */

      /* 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整 */
      width: calc((100% - 40rpx) / 2);
      /* END */

      /* 加入这两个后每个item的宽度就生效了 */
      min-width: calc((100% - 40rpx) / 2);
      max-width: calc((100% - 40rpx) / 2);
      /* END */
      text-align: center;

      image {
        width: 100rpx;
        height: 100rpx;
      }

      .abilityText {
        font-size: 30rpx;
        font-weight: bold;
        padding-top: 50rpx;
      }
    }
  }
}
</style>
